<template>
  <canvas/>
</template>
<script>
  export default {
    name: 'canvasArrow',
    props: {
      run: Number,
      width: {
        type: Number,
        default: 20
      },
      angle: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        ctx: null,
        height: 15,
        lineWidth: 1
      }
    },
    mounted() {
      this.initCanvas(this.$el)
    },
    methods: {
      initCanvas(el) {
        el.style.transform = 'rotate(' + this.angle + 'deg)'
        el.width = this.width
        el.height = this.height
        this.ctx = el.getContext('2d')
        this.drawCanvas()
      },
      drawCanvas() {
        this.ctx.strokeStyle = '#41c45d'
        this.ctx.fillStyle = '#41c45d'
        if (this.run == 0) {
          this.ctx.strokeStyle = '#f11818'
          this.ctx.fillStyle = '#f11818'
        }
        if (this.run == 2) {
          this.ctx.strokeStyle = '#1c84f5'
          this.ctx.fillStyle = '#1c84f5'
        }
        this.ctx.lineWidth = this.lineWidth

        this.ctx.beginPath()
        this.ctx.moveTo(0, this.height / 4)
        this.ctx.lineTo(this.width - 5, this.height / 4)
        this.ctx.lineTo(this.width - 5, 0)
        this.ctx.lineTo(this.width, this.height / 2)
        this.ctx.lineTo(this.width - 5, this.height)
        this.ctx.lineTo(this.width - 5, this.height * 3 / 4)
        this.ctx.lineTo(0, this.height * 3 / 4)
        this.ctx.closePath()
        this.ctx.fill()
      }
    }
  }
</script>
<style scoped>
  canvas {
    display: block;
  }
</style>
